import React, { useState, useEffect } from 'react';
import './index.scss'
import houseData from './mock'
const List = () => {
    const options = [
        {
            label: "售价",
            field: "priceType",// {price: [1,2]}
            children: [
                {
                    label: "200万以下",
                    value: 1,
                },
                {
                    label: "200-300万",
                    value: 2,
                },
                {
                    label: "300-400万",
                    value: 3,
                },
                {
                    label: "500-1000万",
                    value: 4,
                }
            ]
        },
        {
            label: "房型",
            field: "houseType",
            children: [
                {
                    label: "一室",
                    value: 1,
                },
                {
                    label: "两室",
                    value: 2,
                },
                {
                    label: "三室",
                    value: 3,
                },
                {
                    label: "四室",
                    value: 4,
                }
            ]
        },
        {
            label: "面积",
            field: "houseArea",
            children: [
                {
                    label: "50-80m",
                    value: 1,
                },
                {
                    label: "80-100m",
                    value: 2,
                },
                {
                    label: "100-120m",
                    value: 3,
                },
                {
                    label: "110-130m",
                    value: 4,
                }
            ]
        }
    ];
    const [filterData, setFilterData] = useState({})
    const change = (data) => {
        setFilterData(data)
    }
    return (
        <div>
            {/* Nav */}
            {/* Search */}
            {/* Filter */}
            <FilterList options={options} change={change}></FilterList>
            {/* List */}
            <ListCom filterData={filterData}></ListCom>
            {/* Footer */}
        </div>
    );
}
// 筛选组件
function FilterList(props) {
    const { options, change } = props;
    const area = ['浦东', '闵行', '宝山', '徐汇', '普陀', '杨浦', '长宁', '松江', '嘉定', '黄浦', '静安', '虹口', '青浦', '奉贤', '金山', '崇明'];
    const map = [
        '10号线(基隆路-虹桥火车站)',
        '10号线(基隆路-航中路)',
        '15号线',
        '18号线',
        '1号线',
        '2号线',
        '3号线',
        '4号线',
        '5号线',
        '南延伸段5号线',
        '5号线支线',
        '6号线',
        '7号线',
        '8号线',
        '9号线'
    ]
    const [tabContent, setTabContent] = useState(area)
    const [filterData, setFilterData] = useState({})// 筛选对象
    useEffect(() => {
        //监听筛选对象 改变则触发更新
        change(filterData)
    }, [filterData])
    return <div className="filter_box">
        <div className="filter_list">
            <div className="label">位置</div>
            <div className="content">
                <div className="tab_nav">
                    <span onClick={() => {
                        setTabContent(area)
                    }}>按区域</span>
                    <span onClick={() => {
                        setTabContent(map)
                    }}>按地铁</span>
                </div>
                <div className="tab_content">
                    {tabContent.map((item) => {
                        return <div key={item} className="tab_label" onClick={() => {
                            // 修改filterData
                            setFilterData(prev => {
                                prev = { ...prev, area: item };
                                return JSON.parse(JSON.stringify(prev))
                            })
                        }}>{item}</div>
                    })}
                </div>
            </div>
        </div>
        {options.map(item => {
            return <div key={item.label} className="filter_list">
                <div className="label">{item.label}</div>
                <div className="content">
                    {item.children.map(val => {
                        return <span key={val.value}>
                            <input type="checkbox" onChange={({ target: { checked } }) => {
                                setFilterData(prev => {
                                    if (checked) {
                                        // 添加
                                        // 判断是不是第一次添加 {}.priceType = []  = undefined
                                        if (prev[item.field]) {
                                            // 说明不是第一次
                                            prev[item.field].push(val.value)
                                            // {name: [1,2]}
                                        } else {
                                            // 第一次
                                            prev[item.field] = [val.value]
                                            // {name: [1]}
                                        }
                                    } else {
                                        // 剔除
                                        const ind = prev[item.field].findIndex(data => data == val.value)
                                        prev[item.field].splice(ind, 1)
                                    }
                                    return JSON.parse(JSON.stringify(prev))
                                })
                            }} />
                            {val.label}
                        </span>
                    })}
                </div>
            </div>
        })}
    </div>
}
// 列表组件
function ListCom(props) {
    const { filterData } = props;
    const filterHouseData = () => {
        // 从mock取出100条数  根据filterData就行过滤
        const data = houseData.houseData.filter(item => {
            let bool = false;
            // ||  &&
            if (filterData['houseType'] && filterData['houseType'].includes(item.houseType)) {
                bool = true
            }
            if (filterData['priceType'] && filterData['priceType'].includes(item.priceType)) {
                bool = true
            }
            if (filterData['houseArea'] && filterData['houseArea'].includes(item.houseArea)) {
                bool = true
            }
            return bool
        })
        return data.length ? data : houseData.houseData;
    }

    return <div>
        {filterHouseData().map(item => {
            return <div>
                {item.title}
            </div>
        })}
    </div>
}



export default List;
